<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="main_header" th:fragment="main_header">
    <header class="main_header fixed_header">
        <div class="container-fluid no_padding clearfix">
            <div class="logo_head">
                <a th:href="${#httpServletRequest.contextPath}+'/index'"><img alt="" src="../assets/images/logo.png"></a>
            </div>
            <div class="righthead_block">
                <nav class="top_nav_links navbar navbar-expand-lg">
                    <div class="collapse navbar-collapse" id="topNav">
                        <ul class="navbar-nav mr-auto">
                            <li><a th:href="${#httpServletRequest.contextPath+'/index'}"><span>首页</span></a></li>
                            <li><a th:href="${#httpServletRequest.contextPath+'/author_about'}"><span>作者</span></a></li>
                            <li><a th:href="${#httpServletRequest.contextPath+'/page_photo'}"><span>照片墙</span></a></li>
                            <!--分类展示-->
                            <li class="menu-item-has-children">
                                <a id="category_a"
                                   th:href="${#httpServletRequest.contextPath+'/CategoryPage'}"><span>分类</span></a>
                                <ul class="sub-menu" id="header_category_ul">
                                    <!--循环分类-->
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div class="search_btn"><a class="search_show" data-target="#search_widow" href="#"><i
                        class="fas fa-search"></i></a></div>
                <div class="sidebar_btn"><a class="floatsidebar_show" data-target="#float_bar_site" href="#"><i
                        class="fas fa-bars"></i></a></div>
            </div>
        </div>
    </header>
    <!--END main header -->
    <script th:inline="javascript">
        <!--循环遍历分类列表，当前页面only加载一次-->
        $(function () {
            $.ajax({
                async: true,
                url: "/queryAllCategory",
                type: "get",
                success: function (data) {
                    $.each(data, function (i, item) {
                        var $li = $(
                            "<li style=\"height: 20px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;\"><a href='/category_subpage/" + item.categoryId + "' title='" + item.categoryName + "'><span>" + item.categoryName + "</span></a></li>"
                        );
                        $("#header_category_ul").append($li);
                    })
                }
            });
        })

        $("#topNav ul li").mouseover(function () {
            $(this).addClass("current-menu-item");
        })
        $("#topNav ul li").mouseout(function () {
            $(this).removeClass("current-menu-item");
        })
    </script>
</div>
</body>
</html>